<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>document - JavaScript</title>
    <style>
        img {
            border: 1px solid #aaa;
        }
    </style>
</head>
<body>
    <h1>document</h1>
    <h4>学习目标</h4>
    <ol id="learning-target">
        <li>了解网页文档结构</li>
        <li>熟悉常用的方法和属性</li>
    </ol>

    

    <div style="text-align: center; display: none;">
        <p>window对象和document对象区别</p>
        <img id="window-document-diff" src="image/window对象和document对象区别.png" alt="window对象和document对象区别" />
    </div>

    

    <div id="document-tree" style="text-align: center; display: none">
        <p>网页文档结构</p>
        <img id="document-tree-img" src="image/网页文档结构.jpg" alt="网页文档结构" />
    </div>

    

    <div id="form-test" style="display: none;">
        <form method="post">
            手机号：<input type="text" name="phone" value="13950508888" />
        </form>
    </div>

    <div id="test-attr" style="display: none;">
        <h4>测试一下切换图片</h4>
        <img id="test-img" src="image/毕业前.jpg" alt="毕业前" style="width: 300px;"/>
    </div>

    

    <div style="display: none;">
        <h4>一个简单的网页头部</h4>
        <div id="header">
            <nav id="header-nav">
                <a href="https://www.163.com">首页</a>
                <a href="https://news.163.com/">新闻</a>
                <a href="https://money.163.com/">财经</a>
                <a href="https://ent.163.com/">娱乐</a>
            </nav>
        </div>
    </div>

    

    <div id="article" style="display: none;">
        <h4>一个简单的文章显示</h4>
        <div id="article-content">
            <p class="content-p">内容一</p>
            <p class="content-p">内容二</p>
            <p class="content-p">内容三</p>
        </div>
    </div>



    <div id="test-innerHTML" style="display: none; text-align: center;">
        <p>innerHTML和outerHTML不同</p>
        <img id="innerHTML-img" src="image/innerHTML和outerHTML.jpg" alt="innerHTML和outerHTML"/>
    </div>




    <div id="test-event" style="display: none;">
        <button id="click-btn">点我试试看</button>
    </div>


    <form id="test-form" action="index.html">
        姓名: <input type="text" id="name" name="name" /><br />
        性别: <input type="radio" name="sex" value="1" />男
            <input type="radio" name="sex" value="2" />女
            <input type="radio" name="sex" value="3" />保密<br />
        <input type="button" id="normal-btn" value="我只是一个普通按钮" />
        <input type="submit" id="submit-btn" value="我是提交表单的按钮" />
        <input type="reset" id="reset-btn" value="我是重置表单的按钮" />
    </form>


    <script type="text/javascript">
        // --------------------------------------------------------------------
        // -- document（文档对象模型）
        // --------------------------------------------------------------------
        /*
            每个载入浏览器的 HTML 文档都会成为 document 对象。
            document 对象使我们可以在脚本中对 HTML 页面中的所有元素进行访问和操作。
        */

        // -----------------------------
        // 1. 查看document对象
        // -----------------------------
        /*
            document 对象是 window 对象的一部分，可通过 window.document 属性对其进行访问。
        */
        // 1.1 打印 document 对象, 并查看其相关属性、方法和原型链


        // -----------------------------
        // 2. 在页面输出内容
        // -----------------------------
        /*
            document.write() // 在页面输出内容
            document.writeln() // 同上，但是会增加 "\n" 换行符号
         */
        // 2.1 在页面输出内容：document对象使用操作html标签的对象
        // 2.2 在页面使用 writeln 分别输出内容：hello和world


        // -----------------------------
        // 3. 获取元素（HTMLElement）(Element)
        // -----------------------------
        /*
            document.getElementById() // 返回对拥有指定 id 的第一个对象的引用。
            document.getElementsByName() // 返回带有指定名称的对象集合（HTMLCollection ）。
            document.getElementsByTagName() // 返回带有指定标签名的对象集合（HTMLCollection ）。
            document.getElementsByClassName() // 返回带有指定标类名的对象集合（HTMLCollection ）。
         */
        // 3.1 获取id为 learning-target 的对象，查看其原型链, 尝试打印其中认识的属性和方法
        // 3.2 获取name为 phone 的对象，查看其原型链, 尝试遍历, 打印其中认识的属性和方法
        // 3.3 获取页面所有的 img 对象，查看其原型链，尝试遍历, 打印其中认识的属性和方法
        // 3.4 获取页面 class 为 content-p 的对象，查看其原型链，尝试遍历, 打印其中认识的属性和方法


        // -----------------------------
        // 4. 获取和设置属性
        // -----------------------------
        /*
            HTMLElement.attributes // 获取所有属性
            HTMLElement.getAttribute(属性名) // 获取指定的属性值
            HTMLElement.setAttribute(属性名, 属性值) // 设置指定的属性值

            HTMLElement.属性名 // 获取指定的属性值
            HTMLElement.属性名 = 属性值 // 设置指定的属性值
         */
        // 4.1 获取id为test-img对象，当鼠标悬浮时切换成毕业后的图片，鼠标离开后切换回去
        // 4.2 获取name为phone文本框的输入的内容
        // 4.3 修改name为phone的文本框内容为: 13950505050
        // 4.4 对比用setAttribute 和 直接用属性名获取的不同



        // -----------------------------
        // 5. 获取和设置样式
        // -----------------------------
        /*
            HTMLElement.style // 获取行内样式

            HTMLElement.style.样式名 = 样式值 // 设置相关样式
         */
        // 5.1 获取页面所有的img元素， 打印出边框样式。
        // 5.2 获取页面所有img元素，当鼠标悬浮时将边框颜色改成黑色#666，鼠标离开后恢复成#aaa
        function ms () {
            let randNum = Math.floor(Math.random() * 100);
            if (randNum < 90) {
                alert("商品已经抢完！！");
                return false;
            }
            // 1/10
        }

        // 惊群

        let str = "hello world";



        // -----------------------------
        // 6. 获取和设置元素内的内容
        // -----------------------------
        /*
            HTMLElement.innerHTML // 获取和设置标签内的内容，支持html标签文本
            HTMLElement.outerHTML // 获取和设置标签(包含这个标签)的内容，支持html标签文本

            HTMLElement.innerText // 获取和设置标签内的内容，会将html标签转义
         */
        // 6.1 获取id为article-content的 innerHTML、outerHTML、innerText, 并对比有什么不同。
        // 6.2 将id为article-content的标签内容替换为：<p>我是通过innerHTML插入进来的</p>
        // 6.3 设置内容时, innerHTML、outerHTML、innerText 三个属性设置有什么不同?


        // -----------------------------
        // 7. 获取父节点和子节点
        // -----------------------------
        /*
            HTMLElement.parentNode // 获取父类元素
            HTMLElement.children // 获取子类元素,只包含标签
            HTMLElement.childNodes// 获取子类元素,包含文本节点
         */
        // 7.1 获取id为header-nav的父类元素
        // 7.2 遍历id为header-nav的对象子元素,children和childNodes有什么不同呢?


        // -----------------------------
        // 8. 创建元素、增加元素和删除元素
        // -----------------------------
        /*
            document.createElement() // 创建一个指定标签名的元素
            HTMLElement.appendChild() // 将一个节点附加到指定父节点的子节点列表的末尾处
            HTMLElement.insertBefore() // 在参考节点之前插入一个拥有指定父节点的子节点
            HTMLElement.removeChild() // 移除已存在的元素
         */
        // 8.1 大家看看这边js代码是不是很多了？上下拖不太方便了，有什么好的办法吗？
        // 8.2 查看网易新闻, 在id为 header-nav 标签下增加新的分类元素。
        // 8.3 上例是增加到尾巴处,有没有办法增加到最前面?
        // 8.4 移除上面新增加的元素。



        // ----------------------------------------------------
        // -- 练习
        // ----------------------------------------------------
        // 1. 设计网易新闻的父类下拉框和子类下拉框, 当父类改变时, 子类下拉框相应切换
        // 2. 做一个简单的动画效果：
        //      有一个外层div, 宽500px, 高为500px
        //      里面有一个div, 宽和高都为20px, 可以从左上角移动到右下角
        // 3. 模仿B站做一个简单的弹幕效果。
        // 4. 5张图轮播, 模拟轮播图效果。模拟: https://36kr.com/


    </script>
</body>
</html>